// 一进入界面，检查是否登录
checkLogin()

// 渲染用户名功能
showUserName()

// 退出登录功能
// 给退出按钮注册点击事件
document.querySelector('#logout').addEventListener('click', () => {
    // 提示用户退出成功
    showToast('退出成功')
    logout()
})

// 获取学生信息功能
async function getData() {
    // const res = await axios.get('/dashboard',{
    //     // 请求参数
    //     // params: {}

    //     // 请求头参数
    //     headers: {
    //         Authorization: localStorage.getItem('my-token')
    //     }
    // })
    const res = await axios({
        url:'/dashboard',
        method: 'get',
        // headers: {
        //     Authorization: localStorage.getItem('my-token')
        // }
    })
    console.log(res);
    // 获取学生数据并渲染
    const {overview, year, salaryData, groupData} = res.data
    renderOverview(overview)
    // 渲染学生就业薪资走势(折线图)
    renderSalary(year)
    // 渲染班级薪资分布(饼图)
    renderClassSalary(salaryData)
    // 渲染每组薪资分布(柱状图)
    renderGroupSalary(groupData)

}

// 渲染学生信息功能
function renderOverview(data) {
    Object.keys(data).forEach(key => {
        document.querySelector(`.${key}`).innerHTML = data[key]
    })
}

getData()

// 渲染每组薪资分布(柱状图)
function renderGroupSalary(groupData) {
  const myChart = echarts.init(document.querySelector('#lines'))
  const option = {
    title: {
      left: '5',
      top: '12',
    },
    tooltip: {
    },
    grid: {
      left: '5%',
      right: '5%',
      top: 30,
      bottom: 30
    },
    xAxis: {
      type: 'category',
      data: groupData[1].map(item => item.name),
      axisLine: {
        lineStyle: {
          color: '#ccc',
          type: 'dashed'
        }
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        lineStyle: {
          color: '#ccc',
          type: 'dashed'
        }
      }
    },
    series: [
      {
        name: '期望薪资',
        data: groupData[1].map(item => item.hope_salary),
        type: 'bar',
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0, color: '#00DA8F' // 0% 处的颜色
          }, {
              offset: 1, color: '#CEFFF5' // 100% 处的颜色
          }],
          global: false, // 缺省为 false
        }
      },
      {
        name: '就业薪资',
        data: groupData[1].map(item => item.salary),
        type: 'bar',
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0, color: '#0C9EFF' // 0% 处的颜色
          }, {
              offset: 1, color: '#D6F8FF' // 100% 处的颜色
          }],
          global: false, // 缺省为 false
        }
      }
    ]
  };
  myChart.setOption(option)

  // 高亮切换/每组数据的重新渲染
  // 1. 利用事件委托给所有的button按钮注册点击事件
  // 2. 基于点击项的类名（btn）确认点击的是 分组的按钮
  // 3. 点击时，可以通过innerHTML获取当前点击的按钮的文本内容（组号）,并利用btn-blue切换高亮
  // 4. 根据组好，配合groupData[index] 获取当前组的数据
  // 5. 拿到数据之后，制定修改option配置项中的x轴和系列数据
  // 6. 主动更新图标 setOption()
  const btns = document.querySelector('#btns')
  btns.addEventListener('click', e => {
    if(e.target.classList.contains('btn')) {
      // 获取组号，最好纯文本，不然会加上空格等
      const index = e.target.innerText
      // x轴数据变更
      option.xAxis.data = groupData[index].map(item => item.name)
      // y轴数据变更
      // 期望薪资
      option.series[0].data = groupData[index].map(item => item.hope_salary)
      // 实际薪资
      option.series[1].data = groupData[index].map(item => item.salary)
      // 重新更新图表
      myChart.setOption(option)
      // 切换高亮按钮
      // 先排他，后添加
      document.querySelector('#btns .btn-blue').classList.remove('btn-blue')
      e.target.classList.add('btn-blue')
    }
  })
}

// 渲染班级薪资分布(饼图)
function renderClassSalary(data) {
    // 1. 基于准备好的容器，创建echarts实例
    const myChart = echarts.init(document.querySelector('#salary'))
    // 2. 准备配置项和数据
    const option = {
        title: {
            text: '班级薪资分布',
            left: '5',
            top: '12',
            textStyle: {
              fontSize: 16
            }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          bottom: '5%',
          left: 'center'
        },
        color: ['#FB9D2C', '#4088F2', '#27BEFF', '#20D597'],
        series: [
          {
            name: '班级薪资分布',
            type: 'pie',
            radius: ['55%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            center: ['50%', '45%'],
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: data.map(item => {
                return {
                    value: item.g_count + item.b_count,
                    name: item.label
                }
            })
            
            // [
            //   { value: 1048, name: 'Search Engine' },
            //   { value: 735, name: 'Direct' },
            //   { value: 580, name: 'Email' },
            //   { value: 484, name: 'Union Ads' },
            // ]
          }
        ]
      };
    // 3. 利用指定的配置和数据展示图表 setOption
    myChart.setOption(option)

}

// 渲染学生就业薪资走势（折线图）
function renderSalary(yearData) {
    // 1. 基于准备好的容器，创建echarts实例
    const myChart = echarts.init(document.querySelector('#line'))
    // 2. 指定配置和数据
    const option = {
        title: {
            text:'2024全学科薪资走势',
            left:'5',
            top:'12',
            textStyle: {
              fontSize: 16
            }
        },
        xAxis: {
          type: 'category',
          data: yearData.map(item => item.month),
          axisLine: {
            lineStyle: {
                color: 'rgb(81,141,239)',
                type: 'dashed'
            }
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
                width:1,
                type: 'dashed',
                color: ['rgb(81,141,239)','blueviolet']
            }
          }
        },
        series: [
          {
            data: yearData.map(item => item.salary),
            type: 'line',
            smooth: true,
            lineStyle: {
                width: 8,
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [{
                        offset: 0, color: '#1698FB' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#3B6BFB' // 100% 处的颜色
                    }],
                    global: false, // 缺省为 false
                    
                }
            },
            areaStyle: {
                color: {
                    type: 'linear',
                    // x: 0, x2: 0, y: 0, y2: 1 是从上到下
                    // x: 0, x2: 1, y: 0, y2: 0 是从左到右
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#1897FB' // 0% 处的颜色
                    }, {
                        offset: 1, color: 'rgba(255,255,255,0)' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }
            },
            symbolSize: 15,
          }
        ],
        grid:{
            top:'20%'
        },
        tooltip: {
            show: true,
            trigger: 'item', // 触发类型 -> 标识点
            trigger: 'axis', // 触发类型 -> 轴
        }
        
      };
    // 3. 利用指定的配置和数据展示图表
    myChart.setOption(option)
}

// 下雪
// 获取body元素
// const body = document.querySelector('body')
// function snowDown() {
//     snowDown.prototype.creatSnow = function(obj) {
//         const left = body.clientWidth
//         obj.style.left = Math.floor(Math.random() * (left-35)) + 'px'
        
//         // 雪花随机颜色
//         const colorId = Math.floor(Math.random()*4);
//         const colors = ['#FB9D2C', '#4088F2', '#27BEFF', '#20D597'];
//         obj.style.color = `${colors[colorId]}`;
//         // 设置雪花的透明度
//         // obj.style.opacity = (Math.floor(Math.random()*3) + 7) / 10
//         // 设置雪花随机大小
//         // obj.style.fontSize = (Math.floor(Math.random() * 20) + 20 ) + 'px'
//         obj.style.fontSize = `${Math.floor(Math.random()*20)+15}px`;
//         // 设置每隔一段时间雪花下落
//         let speed = 0
//         setInterval(() => {
//             // 如果没超过body的高度，就继续下落
//             if (speed < body.clientHeight - 100) {
//                 speed += 10
//                 obj.style.top = speed + 'px'
//             }
//             else (
//                 obj.style.display = 'none'
//             )
//         }, 50)
//     }
// }

// 每隔一段时间创建一个雪花
// setInterval(() => {
//     const snowBox = document.querySelector('.snowBox')
//     const snow = document.createElement('div')
//     snow.className = 'snow'
//     snow.style.position = 'absolute'
//     snow.innerHTML = '❉'
//     snowBox.append(snow)
//     const snowStart = new snowDown()
//     snowStart.creatSnow(snow)
// },200)

// 1. 创建一个实例对象，每100ms执行一次，创造一片雪花
// 2. 创建雪花，设置雪花的样式，设置雪花的初始位置，设置雪花的动画
// 3. 渲染到页面中
// function snowDown(){
//     snowDown.prototype.createSnow = function(obj){
//         // 雪花随机颜色
//         const colorId = Math.floor(Math.random()*5);
//         const colors = ['#fff','red','pink','#ff6700','blueviolet'];
//         obj.style.color = `${colors[colorId]}`;
//         // 雪花随机大小
//         obj.style.fontSize = `${Math.floor(Math.random()*20)+15}px`;
//         // 雪花随机位置
//         const snowBoxWidth = document.querySelector('.snowBox').clientWidth;
//         let leftPosition = Math.floor(Math.random() * snowBoxWidth);
//         obj.style.left = `${leftPosition}px`;
//         // 雪花随时间下落
//         let speed = 0;
//         setInterval(function(){
//             const snowBoxHeight = document.querySelector('.snowBox').clientHeight;
//             // 如果雪花没有下落到最下面，则继续下落
//             if(speed < snowBoxHeight){
//                 speed += 5;
//                 obj.style.top = `${speed}px`;
//                 // 随机左右移动
//                 // leftPosition += Math.ceil(Math.random() * 16) - 8; // 随机移动 -10 到 10 像素
//                 // if (leftPosition < 0) leftPosition = 0;
//                 // if (leftPosition > snowBoxWidth) leftPosition = snowBoxWidth;
//                 // obj.style.left = `${leftPosition}px`;
//             }
//             else{
//                 // 落到最下面消失
//                 obj.style.display = 'none';
//             }
//         },30)
//     }
// }

// setInterval(function(){
//     const snowBox = document.querySelector('.snowBox');
//     const snow = document.createElement('div');
//     snow.innerHTML = '✽';
//     snow.classList.add('snow');
//     snow.style.position = 'absolute';
//     snowBox.append(snow);
//     const snowObj = new snowDown();
//     snowObj.createSnow(snow);
// },200)
